<template>
  <div class="damage-info">
    <!-- 页面title -->
    <el-form ref="form" :rules="rules" label-position="right" :model="currentRow" label-suffix="：" label-width="140px"
             style="box-shadow: 0 0 10px 10px rgb(0 0 0 / 3%)">
      <el-card style="padding: 20px">
        <div v-if="!isLook" style="text-align: right">
          <el-button
            type="primary"
            :disabled="isDisabled"
            @click="validatorForm">提交记录
          </el-button>
        </div>

        <div style="text-align: center;margin-bottom: 30px"><span style="font-size: 25px; color: #1990FE;">{{ currentRow.damageTypeName }}风险点信息调查表</span>
        </div>
        <el-divider content-position="left"><span style="font-size: 25px;color: #1990FE">基本信息</span></el-divider>
        <el-row :gutter="20" v-if="isLook">
          <el-col :span="12">
            <p><span class="label_view">灾害点:</span><span class="info_view">{{currentRow.name}}</span></p>
            <p><span class="label_view">灾害点编号:</span><span class="info_view">{{currentRow.damageNo}}</span></p>
            <p><span class="label_view">路线:</span><span
              class="info_view">{{currentRow.roadCode}}{{currentRow.roadName}}</span></p>
            <p><span class="label_view">管养单位:</span><span class="info_view">{{currentRow.deptName}}</span></p>
            <p><span class="label_view">风险等级:</span><span class="info_view">      <el-tag size="mini"
                                                                                          :style="currentRow.riskLevel| gradeDangerColor"
                                                                                          style="color: white;cursor: pointer"
                                                                                       >
              {{currentRow.riskLevelName}}
            </el-tag></span></p>

          </el-col>

          <el-col :span="12">
            <p><span class="label_view">排查单位:</span><span class="info_view">{{currentRow.unitName}}</span></p>
            <p><span class="label_view">排查人:</span><span class="info_view">{{currentRow.userName}}</span></p>
            <p><span class="label_view">排查时间:</span><span
              class="info_view">{{currentRow.createTime | formatTimer}}</span>
            </p>
            <p><span class="label_view">排查次序:</span><span class="info_view">{{currentRow.count}}</span></p>
          </el-col>
        </el-row>

        <div v-else>
          <el-form-item label="管养单位" prop="deptTreeId">
            <organization
              v-model="currentRow.deptTreeId"
              placeholder="选择管养单位"
              @change="changeDept"
            ></organization>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="路线" prop="roadId">
                <el-select
                  :popper-append-to-body="false"
                  v-model="currentRow.roadId"
                  clearable
                  filterable
                  placeholder="选择路线"
                  @change="changeRoad">
                  <el-option
                    v-for="item in roadSelectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="灾害点" prop="damageId">
                <el-select
                  :popper-append-to-body="false"
                  v-model="currentRow.damageId"
                  filterable
                  clearable
                  placeholder="选择灾害点">
                  <el-option
                    v-for="item in damageSelectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card" style="height: 600px;overflow: auto;padding-top: 20px;margin-top: 20px">
        <el-divider content-position="left"><span style="font-size: 25px;color: #1990FE">排查内容</span></el-divider>
        <el-form ref="form" label-position="right" :model="currentRow" label-suffix="："
                 label-width="160px" style="box-shadow: 0 0 10px 10px rgb(0 0 0 / 3%);">
          <el-tabs v-model="activeName" style="padding: 20px">
            <el-tab-pane v-for="item in template" :key="item.id" :label="item.name" :name="item.name">
              <div v-for="child1 in item.childList" :key="child1.id">
                <div v-if="child1.level === 1">
                  <div v-if="child1.mathTypeName === '单选'">
                    <el-form-item :label="child1.name">
                      <el-radio-group v-model="child1.value">
                        <el-radio-button :disabled="isLook" v-for="child2 in child1.childList" :key="child2.code"
                                         :label="child2.code">
                          {{child2.name}}
                        </el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </div>
                  <div v-if="child1.mathTypeName === '多选'">
                    <el-form-item :label="child1.name">
                      <el-checkbox-group
                        size="small"
                        :disabled="isLook"
                        v-model="child1.valueList">
                        <el-checkbox-button
                          v-for="child2 in child1.childList"
                          :key="child2.code"
                          :label="child2.code">
                          {{ child2.name }}
                        </el-checkbox-button>
                      </el-checkbox-group>
                    </el-form-item>
                    <el-form-item
                      label="其他"
                      v-if="
                          child1.hasOther === 1 &&
                          child1.valueList &&
                          child1.valueList.indexOf(child1.childList.length) !==-1">
                      <el-input
                        v-model="child1.other"
                        clearable
                        :disabled="isLook"
                        placeholder="请描述其他"
                        style="width: 40%"
                      ></el-input>
                    </el-form-item>
                  </div>
                  <div v-if="child1.mathTypeName === '填写'">
                    <el-form-item :label="child1.name" prop="longitude" v-if="child1.inputTypeName === '日期'">
                      <el-date-picker
                        :disabled="isLook"
                        v-model="child1.value"
                        type="date"
                        value-format="timestamp"
                        placeholder="选择日期">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item :label="child1.name" prop="longitude" v-else>
                      <el-input :disabled="isLook" v-model.trim="child1.value" placeholder="请输入"
                                :type="child1.inputTypeName=== '数字'?'number':''" style="width: 40%">
                      </el-input>
                    </el-form-item>
                  </div>
                </div>

                <div v-else>
                  <el-divider content-position="left"><span
                    style="font-size: 15px;color: #1990FE">{{child1.name}}</span></el-divider>
                  <div v-for="child2 in child1.childList" :key="child2.id">
                    <div v-if="child2.mathTypeName === '单选'">
                      <el-form-item :label="child2.name">
                        <el-radio-group v-model="child2.value">
                          <el-radio-button :disabled="isLook" v-for="child3 in child2.childList" :key="child3.code"
                                           :label="child3.code">
                            {{child3.name}}
                          </el-radio-button>
                        </el-radio-group>
                      </el-form-item>
                    </div>
                    <div v-if="child2.mathTypeName === '多选'">
                      <el-form-item :label="child2.name">
                        <el-checkbox-group v-model="child2.valueList">
                          <el-checkbox :disabled="isLook" v-for="child3 in child2.childList" :key="child3.code"
                                       :label="child3.code">
                            {{child3.name}}
                          </el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                      <el-form-item label="其他"
                                    v-if="child2.hasOther === 1 && child2.valueList && child2.valueList.indexOf(child2.childList.length) !== -1">
                        <el-input :disabled="isLook" v-model="child2.other" clearable placeholder="请描述其他"
                                  style="width: 40%"></el-input>
                      </el-form-item>
                    </div>

                    <div v-if="child2.mathTypeName === '不计分'">
                      <el-divider content-position="left"><span
                        style="font-size: 15px;color: #1990FE">{{child2.name}}</span></el-divider>
                      <div v-for="child3 in child2.childList" :key="child3.id">
                        <div v-if="child3.mathTypeName === '多选'">
                          <el-form-item :label="child3.name">
                            <el-checkbox-group v-model="child3.valueList">
                              <el-checkbox :disabled="isLook" v-for="child4 in child3.childList" :key="child4.code"
                                           :label="child4.code">{{child4.name}}
                              </el-checkbox>
                            </el-checkbox-group>
                          </el-form-item>
                          <el-form-item label="其他"
                                        v-if="child3.hasOther === 1 && child3.valueList && child3.valueList.indexOf(child3.childList.length) !== -1">
                            <el-input :disabled="isLook" v-model="child3.other" clearable placeholder="请描述其他"
                                      style="width: 40%"></el-input>
                          </el-form-item>
                        </div>
                        <div v-if="child3.mathTypeName === '填写'">
                          <el-form-item :label="child3.name" prop="longitude">
                            <el-input :disabled="isLook" v-model.trim="child3.value" placeholder="请输入"
                                      :type="child3.inputTypeName=== '数字'?'number':''" style="width: 40%">
                            </el-input>
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="特征描述和照片" name="img">
              <el-form-item label="隐患点特征描述" prop="longitude">
                <el-input v-model.trim="currentRow.explanation"
                          type="textarea"
                          :disabled="isLook"
                          :autosize="{ minRows: 4, maxRows: 6}"
                          placeholder="主要从灾害历史特征、隐患点现状特征及对公路可能造成的危害进行描述"
                          style="width: 40%">
                </el-input>
              </el-form-item>
              <el-divider content-position="left">
                平面图或全貌照片（反映特征及范围，与危害对象关系），剖面图或局部照片。
              </el-divider>
              <el-row :gutter="10" v-if="isLook">
                <el-col :span="4" v-for="(url, index) in currentRow.picList" :key="index">
                  <el-image @click="_previewImg(index,currentRow.picList)" style="height: 100px; width: 100px"
                            fit="scale-down" :src="constUrl + url"></el-image>
                </el-col>
              </el-row>
              <el-form-item label="图片" prop="picList" v-else>
                <upload-img
                  v-model="currentRow.picList"
                  :limit="9"
                  :size-limit="4"
                  ref="uploadPic"
                ></upload-img>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </el-card>
    </el-form>
    <picture-viewer ref="imageViewer"></picture-viewer>
  </div>
</template>
<script>
  import Format from '@/utils/format'
  import constUrl from '@/services/env'
  import PictureViewer from '@/components/picture-viewer/index-name';
  import ItemMixins from "../../item.mixins";
  import {updateDamageForm, putDamageForm} from "@/services/model/form";
  import Organization from "@/components/organization-unit/all";
  import UploadImg from "@/components/upload-img";

  export default {
    props: ['currentRow', 'isLook', 'template'],
    components: {PictureViewer, Organization, UploadImg},
    mixins: [ItemMixins],
    data() {
      return {
        rules: {
          deptTreeId: {required: true, message: "请选择管养单位"},
          roadId: {required: true, message: "请选择路线"},
          damageId: {required: true, message: "请选择灾害点"},
        },
        activeName: '灾害历史特征',
        constUrl,
        isDisabled: false,
      }
    },
    methods: {
      // 表单校验
      validatorForm() {
        return new Promise((resolve) => {
          this.$refs.form.validate((valid) => {
            if (valid && resolve) {

              this.submitData();
              this.isDisabled = true
            }
          });
        });
      },
      // 新增编辑提交数据
      async submitData() {
        this.currentRow.formJson = JSON.stringify(this.template);
        let action = this.currentRow.id ? updateDamageForm : putDamageForm
        let res = await action(this.currentRow);
        if (res.code === 200) {
          this.$notify({
            type: "success",
            title: "提示",
            message: this.currentRow.id ? "更新成功！" : "添加成功！",
          });
          this.$emit("submit");
        }
        this.isDisabled = false

      },
      // 查看大图
      _previewImg(index, urls) {
        let urlsList = []
        urls.map(x => {
          let item = {}
          item.url = this.constUrl + x
          urlsList.push(item)
        })
        // 显示照片查看器
        this.$refs.imageViewer.showViewer(urlsList, index)
      },
      //获取路线列表
      async changeDept() {
        let list = await this.getRoadListByDept(this.currentRow.deptTreeId);
        if (this.currentRow.roadId) {
          this.changeRoad()
        } else if (list.length > 0) {
          this.$set(this.currentRow, "roadId", list[0].id);
          this.changeRoad()
        } else {
          this.$set(this.currentRow, "roadId", "");
          this.$set(this.currentRow, "slopeId", "");
        }
      },
      //查询灾害点列表
      async changeRoad() {
        this.damageSelectList = [];
        const {roadId, deptTreeId} = this.currentRow;
        let list = await this.getDamageSelectList(deptTreeId, roadId)
        if (this.currentRow.damageId) {
          return
        } else if (list.length > 0) {
          this.$set(this.currentRow, "damageId", list[0].id);
        } else {
          this.$set(this.currentRow, "damageId", "");
        }
      },
    },
    mounted() {
    },
    filters: {
      // 时间格式化
      formatTimer(timer) {
        if (timer) {
          return Format(new Date(timer), 'yyyy-MM-dd hh:mm:ss')
        }
        return ''
      },
    },
    created() {
    },
    computed: {}
  }
</script>

<style lang="less" scoped>
  .left-ten {
    margin-left: 10px;
  }

  .label_view {
    display: inline-block;
    color: #1990FE;
    font-weight: 600;
    text-align: left;
    width: 90px;
  }

  .damage-info {
    font-size: 15px;
    margin-left: 10px;
    line-height: 30px;
    color: #000000;

  }

  .button-foot {
    margin-top: 10px;
    text-align: center;
    padding: 10px;

    .el-button {
      background: #1990FE;
      border: none;
    }
  }


  .info_view {
    text-align: left;
    color: #000000
  }
</style>
